<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>首页</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="../../component/pear/css/pear.css" />
	<link rel="stylesheet" href="../../admin/css/other/console2.css" />
	<style>
		.kftime {
			color: #777777;
		}
	</style>
</head>

<body class="pear-container">
	<div class="layui-row layui-col-space10">
		<div class="layui-col-md8">
			<div class="layui-row layui-col-space10">
				<div class="layui-col-md6">
					<div class="layui-card">
						<div class="layui-card-header">
							快捷菜单
						</div>
						<div class="layui-card-body">
							<div class="layui-row layui-col-space10">
								<div class="layui-col-md3 layui-col-sm4 layui-col-xs4">
									<div class="pear-card" data-id="home2" data-title="任务设置"
										data-url="view/rwsz/rwcard.html">
										<i class="layui-icon layui-icon-set"></i>
									</div>
									<span class="pear-card-title">任务详情</span>
								</div>
								<div class="layui-col-md3 layui-col-sm4 layui-col-xs4">
									<div class="pear-card" data-id="home2" data-title="评论预测"
										data-url="view/console/console1.html">
										<i class="layui-icon layui-icon-website"></i>
									</div>
									<span class="pear-card-title">新增任务</span>
								</div>
								<div class="layui-col-md3 layui-col-sm4 layui-col-xs4">
									<div class="pear-card" data-id="home1" data-title="评论分类"
										data-url="view/document/table.html">
										<i class="layui-icon layui-icon-align-center"></i>
									</div>
									<span class="pear-card-title">评论预测</span>
								</div>
								<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
									<div class="pear-card" data-id="home3" data-title="情感分类"
										data-url="http://www.baidu.com">
										<i class="layui-icon layui-icon-camera"></i>
									</div>
									<span class="pear-card-title">概况统计</span>
								</div>
								<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
									<div class="pear-card" data-id="home4" data-title="负评监测"
										data-url="http://www.baidu.com">
										<i class="layui-icon layui-icon-console"></i>
									</div>
									<span class="pear-card-title">详细对比</span>
								</div>
								<div class="layui-col-md3 layui-col-sm4 layui-col-xs4">
									<div class="pear-card" data-id="home6" data-title="数据监测"
										data-url="view/sjjc/pljc.html">
										<i class="layui-icon layui-icon-face-smile"></i>
									</div>
									<span class="pear-card-title">问题发现</span>
								</div>
								<div class="layui-col-md3 layui-col-sm4 layui-col-xs4">
									<div class="pear-card" data-id="home5" data-title="问题发现"
										data-url="view/sjjc/wtfx.html">
										<i class="layui-icon layui-icon-auz"></i>
									</div>
									<span class="pear-card-title">系统日志</span>
								</div>
								<div class="layui-col-md3 layui-col-sm4 layui-col-xs4">
									<div class="pear-card" data-id="home7" data-title="系统日志"
										data-url="view/system/log.html">
										<i class="layui-icon layui-icon-app"></i>
									</div>
									<span class="pear-card-title">系统日志</span>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="layui-col-md6">
					<div class="layui-card">
						<div class="layui-card-header">
							管理模块
						</div>
						<div class="layui-card-body">
							<div class="layui-row layui-col-space10">
								<div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
									<div class="pear-card2">
										<div class="title">上次爬取时间</div>
										<div class="count pear-text" id="lb1">13:10pm</div>
									</div>
								</div>
								<div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
									<div class="pear-card2">
										<div class="title">爬取总数</div>
										<div class="count pear-text" id="lb2">73180</div>
									</div>
								</div>
								<div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
									<div class="pear-card2">
										<div class="title">预测总数</div>
										<div class="count pear-text" id="lb3">42032</div>
									</div>
								</div>
								<div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
									<div class="pear-card2">
										<div class="title">负评总数</div>
										<div class="count pear-text" id="lb4">10073</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="layui-col-md12">
					<div class="layui-card">
						<div class="layui-card-body">
							<div class="layui-tab custom-tab layui-tab-brief" lay-filter="docDemoTabBrief">
								<div id="echarts-records" style="background-color:#ffffff;min-height:400px;"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="layui-col-md4">
			<div class="layui-card">
				<div class="layui-card-header">概况</div>
				<div class="layui-card-body">
					<ul class="pear-card-status">
						<li>
							<div class="layui-status-img"><a href="javascript:;"><img
										style="width: 32px;height: 32px;border-radius: 50px;"
										src="../../admin/images/car1.png"></a></div>
							<div>
								<p>奥迪A4 共<a class="pear-text"
										lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">2700</a>条数据</p>
								<span class="kftime">一分钟前</span>
								<a href="javascript:;" data-id="1"
									class="pear-btn pear-btn-primary pear-btn-xs pear-reply">查看详情</a>
							</div>
						</li>
						<li>
							<div class="layui-status-img"><a href="javascript:;"><img
										style="width: 32px;height: 32px;border-radius: 50px;"
										src="../../admin/images/car1.png"></a></div>
							<div>
								<p>奥迪Q3 共<a class="pear-text"
										lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">900</a>条数据</p>
								<span class="kftime">十分钟前</span>
								<a href="javascript:;" data-id="1"
									class="pear-btn pear-btn-primary pear-btn-xs pear-reply">查看详情</a>
							</div>
						</li>
						<li>
							<div class="layui-status-img"><a href="javascript:;"><img
										style="width: 32px;height: 32px;border-radius: 50px;"
										src="../../admin/images/car1.png"></a></div>
							<div>
								<p>奥迪A3 共<a class="pear-text" id="A3"
										lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">210</a>条数据</p>
								<span class="kftime">半小时前</span>
								<a href="javascript:;" data-id="1"
									class="pear-btn pear-btn-primary pear-btn-xs pear-reply">查看详情</a>
							</div>
						</li>
						<li>
							<div class="layui-status-img"><a href="javascript:;"><img
										style="width: 32px;height: 32px;border-radius: 50px;"
										src="../../admin/images/car1.png"></a></div>
							<div>
								<p>奥迪Q5L 共<a class="pear-text" id="Q5L"
										lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">1700</a>条数据</p>
								<span class="kftime">一天前</span>
								<a href="javascript:;" data-id="1"
									class="pear-btn pear-btn-primary pear-btn-xs pear-reply">查看详情</a>
							</div>
						</li>
						<li>
							<div class="layui-status-img"><a href="javascript:;"><img
										style="width: 32px;height: 32px;border-radius: 50px;"
										src="../../admin/images/car1.png"></a></div>
							<div>
								<p>奥迪A7 共<a class="pear-text"
										lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">810</a>条数据</p>
								<span class="kftime">三天前</span>
								<a href="javascript:;" data-id="1"
									class="pear-btn pear-btn-primary pear-btn-xs pear-reply">查看详情</a>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
	<!--</div>-->
	<script src="../../component/layui/layui.js"></script>
	<script src="../../component/pear/pear.js"></script>
	<script>
		const host = "http://localhost/LSTM_car_comment/public/";
		function getzf(num) {
			if (parseInt(num) < 10) {
				num = '0' + num;
			}
			return num;
		}
		layui.use(['layer', 'echarts', 'carousel', 'element', 'table'], function () {
			var $ = layui.jquery,
				layer = layui.layer,
				element = layui.element,
				echarts = layui.echarts,
				table = layui.table,
				carousel = layui.carousel;
			//请求数据
			// A3数量
			$.get(host + "web/console/carCount?carModel=A3", function (data) {
				$('#A3').html(data);
			});
			$.get(host + "web/console/carCount?carModel=Q5L", function (data) {
				$('#Q5L').html(data);
			});
			//上次爬取时间
			$.get(host + "web/console/count1", function (data) {
				$('#lb1').html(data);
			});
			//爬取总数
			$.get(host + "web/console/count2", function (data) {
				$('#lb2').html(data);
			});
			//预测总数
			$.get(host + "web/console/count3", function (data) {
				$('#lb3').html(data);
			});
			//负评总数
			$.get(host + "web/console/count4", function (data) {
				$('#lb4').html(data);
			});

			let cols = [
				[{
					type: 'checkbox'
				},
				{
					title: '型号',
					field: 'roleName',
					align: 'center',
					width: 100
				},
				{
					title: '购买总数',
					field: 'roleCode',
					align: 'center'
				},
				{
					title: '负评总数',
					field: 'details',
					align: 'center'
				},
				{
					title: '未处理负评数',
					field: 'enable',
					align: 'center',
					templet: '#role-enable'
				}
				]
			]

			table.render({
				elem: '#role-table',
				url: '../../admin/data/role.json',
				page: true,
				cols: cols,
				skin: 'line'
			});


			var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');

			$("body").on("click", "[data-url]", function () {
				parent.layui.tab.addTabOnlyByElem("content", {
					id: $(this).attr("data-id"),
					title: $(this).attr("data-title"),
					url: $(this).attr("data-url"),
					close: true
				})
			})


			let bgColor = "#fff";
			let color = [
				"#0090FF",
				"#36CE9E",
				"#FFC005",
				"#FF515A",
				"#8B5CFF",
				"#00CA69"
			];

			$.get(host + 'web/console/map', function (data) {
				option = {
					title: {
						text: "数据一览表"
					},
					legend: {},
					tooltip: {},
					dataset: {
						dimensions: ['year', '正面评论', '负面评论'],
						source: data,
					},
					xAxis: {
						name: '年份',
						type: 'category'
					},
					yAxis: {
						name: '数量'
					},
					series: [{
						type: 'line'
					},
					{
						type: 'line'
					}
					]
				};
				echartsRecords.setOption(option);
			});
			window.onresize = function () {
				echartsRecords.resize();
			}
		});
	</script>
</body>

</html>